<template>
  <view class="px-4 box-border bg-white min-h-[100vh]">
    <uni-calendar
      class="uni-calendar--hook"
      :selected="selected"
      :showMonth="false"
      @monthSwitch="changeMonth"
    />
    <up-divider lineColor="#BBBBBB"></up-divider>
    <view class="desc text-black text-[31rpx]">
      <view class="flex flex-row items-center mb-3">
        本月打卡：
        <view class="flex flex-row items-center" @click="toClockDeatil">
          <text class="text-[#038AFE] px-1">{{
            statData.clockMonthDayCount
          }}</text
          >天，
          <text class="text-[#038AFE] px-1">{{ statData.clockMonthCount }}</text
          >次
        </view>
      </view>
      <view class="flex flex-row items-center mb-3">
        本月报备：
        <view @click="toReportDeatil">
          <text class="text-[#038AFE] px-1">{{
            statData.reportMonthCount
          }}</text
          >次
        </view>
      </view>
      <view class="flex flex-row items-center">
        标记说明：
        <view class="flex flex-row items-center ml-1">
          <view class="dot bg-[#038AFE]"></view>
          <text>打卡</text>
        </view>
        <view class="flex flex-row items-center ml-5">
          <view class="dot bg-[#F9AF2F]"></view>
          <text>报备</text>
        </view>
      </view>
    </view>
    <up-toast ref="uToastRef"></up-toast>
  </view>
</template>

<script setup lang="ts">
import { listClockByTime } from "@/api/police/clock";
import dayjs from "dayjs";

const uToastRef = <any>ref(null);
const data = reactive({
  queryParam: {
    month: dayjs(new Date()).format("YYYY-MM"),
    policeUserId: undefined,
  },
  statData: {
    clockMonthCount: 0, //本月打卡次数
    clockMonthDayCount: 0, //本月打卡天数
    reportMonthCount: 0, //本月报备天数
  },
  selected: <any>[],
});
const { queryParam, statData, selected } = toRefs(data);

// 按照月份查询民警打卡记录
const getClockList = () => {
  uni.showLoading({
    title: "加载中",
    mask: true,
  });
  listClockByTime(queryParam.value)
    .then((res: any) => {
      uni.hideLoading();
      const { data } = res;
      statData.value.clockMonthCount = data.clockMonthCount;
      statData.value.clockMonthDayCount = data.clockMonthDayCount;
      statData.value.reportMonthCount = data.reportMonthCount;
      data.monthVos = data.monthVos ?? [];
      selected.value = data.monthVos.map((item: any) => {
        let typeArr = <any>[];
        if (item.clockStatus == 1) {
          typeArr = ["clock"];
        }
        if (item.reportStatus == 1) {
          typeArr = ["report"];
        }
        if (item.clockStatus == 1 && item.reportStatus == 1) {
          typeArr = ["clock", "report"];
        }
        item = {
          date: item.clockDay,
          type: typeArr,
        };
        return item;
      });
    })
    .catch((err: any) => {
      uni.hideLoading();
      uToastRef.value.show({
        type: "error",
        message: err,
      });
    });
};
// 选择月份改变
const changeMonth = (e: any) => {
  let monthStr = e.month < 10 ? "0" + e.month : e.month;
  queryParam.value.month = e.year + "-" + monthStr;
  getClockList();
};
const toClockDeatil = () => {
  uni.navigateTo({
    url: `/subPages/police/clock/clockInfo?time=${queryParam.value.month}&userId=${queryParam.value.policeUserId}`,
  });
};
const toReportDeatil = () => {
  uni.navigateTo({
    url: `/subPages/police/report/reportInfo?time=${queryParam.value.month}&userId=${queryParam.value.policeUserId}`,
  });
};

onLoad((options) => {
  if (options && options.userId) {
    queryParam.value.policeUserId = options.userId;
    getClockList();
  }
});
</script>
<style lang="scss">
.desc {
  width: 100%;
  .dot {
    width: 16rpx;
    height: 16rpx;
    border-radius: 50%;
    margin-right: 10rpx;
  }
}
</style>
